<template>
  <el-select style="width: 100%" v-model="shopName" value-key="id" clearable filterable placeholder="公司"
             :filter-method="remoteMethod" @change="selectShop">
    <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item">
    </el-option>
  </el-select>
</template>

<script>
import {list as shopList } from '@/api/company'
import utils from '../../utils/utils.js'
export default {
  props: ["shopname"],
  data() {
    return {
      shopName: '',
      shopList: [],
      query:{
        shopId:'',
        name:""
      }
    }
  },
  watch:{
    shopname(newval,oldval){
      this.shopName=newval
    }
  },
  created(){
    if(!utils.isNull(this.shopname)){
      this.shopName=this.shopname
    }
    var _this = this
    _this.loadShop('')
  },
  methods: {
    remoteMethod(query) {
      this.loadShop(query)
    },
    loadShop(query) {
      var _this = this
      let params = new URLSearchParams();
      params.append('name', query)
      shopList(params).then(response => {
        _this.shopList = response.data.data

        console.log(_this.shopList )
        if(!utils.isNull(_this.shopname)){
          _this.shopName=_this.shopname
        }
      })
    },
    selectShop(e) {
      if (!utils.isNull(e)) {
        this.query.shopId = e.id
        this.query.name = e.name

      } else {
        this.query.shopId=""
        this.query.name = ''
      }
      this.$emit('queryCompanyClick',this.query)
    },
  },
}
</script>

<style>
</style>
